<template>
    <div class="flex-row wrap">
        <div v-if="type==1 && images">
            
            <div :class="['flex-row','single-image',{ 'no-get':!mediaUrls[images[0]]}]" v-if="images.length==1">
                <el-image 
                    :preview="id" 
                    v-if="mediaUrls[images[0]]" 
                    :src="baseUrl+mediaUrls[images[0]]" 
                    :key="images[0]" style="width:100%" >
                </el-image>
                <i v-else class="layui-icon layui-icon-picture-fine"></i>
            </div>
            <div class="images-grid" v-if="images.length!=1">
                <div class="images-grid-item" v-for="img in images" :key="img">
                    <el-image 
                        v-if="mediaUrls[img]" 
                        :preview="id" 
                        class="multi-image" 
                        :src="baseUrl+mediaUrls[img]" 
                        
                    ></el-image> 
                    <i v-else class="layui-icon layui-icon-picture-fine"></i>
                </div>
            </div>

        </div>

        <video-player
            v-if="type==15 && videoContentURL"
            :src="videoContentURL"
            class="video"
        /> 

        <a v-if="type==3" :href="linkURL" target="_blank" class="flex-column link">
            <el-image fit="cover" class="link-image" :src="linkImageURL||''">
                <div slot="error" class="image-slot">
                    <i class="el-icon-link"></i>
                </div>
                <div slot="placeholder" class="image-slot">
                    加载中<span class="dot">...</span>
                </div>
            </el-image>
            <div class="fontGrey flex-row link-info">
                <div class="link-desc">{{linkTitle}}</div>
            </div>
        </a>   

    </div>        
</template>
<script>
import VideoPlayer from '@/components/videoPlayer'

export default {
    name:'timeline-media',
    components:{
        VideoPlayer
    },
    props:{
        id:{ type:Number },
        type:{
            type:Number
        },
        images:{ type: Array },
        linkTitle:{ type:String,default:'' },
        linkImageURL:{type:String,default:''},
        linkURL:{type:String,default:''},
        linkDesc:{type:String,default:''},
        videoContentURL:{type:String,default:''},
        videoPreviewURL:{type:String,default:''},
        mediaUrls:{type:Object},
        baseUrl:{type:String}
    },
}
</script>
<style scoped>
.link{
  background: #f4f3f8;
  padding: 6px;
  display: flex;
  flex-direction: row;
  width: 450px;
  border-radius: 5px;
}
.video{
    width: 200px;
    border-radius: 5px;
    overflow: hidden
}
.link-info{
    padding: 5px 0 5px 5px;
    box-sizing: border-box;
    overflow: hidden;
 }
.link-desc{
    
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;

    line-height: 16px;
    font-size: 14px;
    color: #333
}
.news-image{
  width: 40px;
  height: 40px;
  border-radius: 2px;
  flex-shrink: 0;
  background-color:#f2f2f2
}
   
.images-grid{
  display: grid;
  grid-template-columns: 80px 80px 80px;
  /* grid-template-rows: 80px 80px 80px; */
  grid-row-gap: 5px;
  grid-column-gap: 5px;
}
.multi-image{
  width: 80px;
  height: 80px;
  object-fit: cover;
  background-color:#f2f2f2;
  border-radius: 3px;
}
.images-grid-item{
    background-color:#f2f2f2; 
    border-radius: 3px;
    justify-content: center;
    align-items: center;
    display: flex;
}
.single-image{
    width:200px;
    border-radius: 3px;
    overflow: hidden;
    justify-content: center;
    align-items: center;
    display: flex;
}
.link-image{
    width: 40px;
    height:40px;
    flex-shrink: 0;
}
.single-image.no-get{
    background-color: #f2f2f2;
    width:200px;
    height:100px;
}
.image-slot{
    justify-content: center;
    align-items: center;
    display: flex;
    flex: 1;
    height: 100%;
    background-color: #eee;
    color: #999
}
</style>